<template>
  <div class="charts">
    <div class="chart" ref="chartRef"></div>
    <div class="right">
      <div class="row" v-for="(comp, index) in props.chartData" :class="{ active: index === curIndex }" :key="index"
        @mouseover="handleOver(comp, index)">
        <div class="name">
          <span class="square" :style="{ 'background-color': getColor(+index) }"></span>
          {{ comp.name }}
        </div>
        <div class="value">{{ comp.value }}&nbsp; %</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onUnmounted, ref, Ref, watch } from 'vue';
import { useECharts } from '@/hooks/web/useECharts';

const emit = defineEmits(['query']);

const curIndex = ref(0);
let myChart: any = null;
const timer = ref<any>(undefined);

const props = defineProps({
  chartData: {
    type: [Array, Object] as any,
    default: () => {
      return [];
    },
  },
});

//切换单位,comp:单位信息
function handleOver(comp: any, index: number | string) {
  curIndex.value = parseInt(index);
  highlightPie(parseInt(index));
}
//图表配色
const getColor = (index = 0, opacity: string = '1') => {
  if (Number.isNaN(index)) return ''
  const colorList = [
    'rgba(246, 187, 66, $$)',
    'rgba(180, 191, 210,$$)',
    'rgba(148, 106, 215, $$)',
    'rgba(73, 169, 175, $$)',
    'rgba(202, 104, 177, $$)',
    'rgba(136, 201, 205, $$)',
  ];
  return colorList[index % 6].replace('$$', opacity);
};

//渲染图表
const chartRef = ref<HTMLElement | null>(null);
const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>);
const dataPie = [
  {
    name: '2024年',
    value: 15.07,
    value1: 14,
  },
  {
    name: '2023年',
    value: 11.01,
    value1: 10,
  },
  {
    name: '2022年',
    value: 9.75,
    value1: 8,
  },
  {
    name: '2021年',
    value: 7.47,
    value1: 7,
  },
  {
    name: '2020年',
    value: 2.14,
    value1: 2,
  }
] as any

let seriesData = [] as any

dataPie.forEach((item, index) => {
  // 每组数据的空格数据
  item.gap = (2 * (item.value + item.value1)) / 100

  // 添加 series数据
  seriesData.push({
    name: item.name,
    type: 'pie',
    clockWise: true, //顺时加载
    hoverAnimation: false, //鼠标移入变大
    center: ['50%', '50%'],
    radius: [`${85 - (index * 12)}%`, `${89 - (index * 12)}%`],
    tooltip: {
      show: true,
    },
    label: {
      normal: {
        show: false
      }
    },
    data: [
      // 第一组数据
      {
        value: item.value,
        name: '赔偿准备',
        itemStyle: {
          normal: {
            color: getColor(index),
            borderRadius: 20,
          }
        }
      },
      // 透明固定值数据
      {
        value: item.gap,
        name: '',
        itemStyle: {
          normal: {
            color: 'transparent',
            borderWidth: 5,
            borderColor: 'transparent',

          }
        }
      },
      // 第二组数据
      {
        value: item.value1,
        name: '责任准备',
        itemStyle: {
          normal: {
            color: getColor(index, '0.4'),
            borderRadius: 20,
          }
        }
      },
      // 透明补全数据
      {
        value: 1,
        name: '',
        itemStyle: {
          normal: {
            color: 'transparent',
            borderWidth: 0,
            borderColor: 'transparent',
          }
        }
      }
    ]
  })
})


watch(
  () => props.chartData,
  (newVal: any[]) => {
    if (!newVal.length) return;
    setOptions({
      grid: {
        left: '1%', // 与容器左侧的距离
        right: '1%', // 与容器右侧的距离
        top: '1%', // 与容器顶部的距离
        bottom: '1%', // 与容器底部的距离

      },
      tooltip: {
        show: true,
        trigger: 'item',
      },
      legend: {
        data: ['赔偿准备', '责任准备'],
        bottom: 10, // 设置图例到底部的距离
        orient: 'horizontal', // 水平布局
        itemGap: 20, // 图例项之间的距离
        itemWidth: 10,
        itemHeight: 10,
        textStyle: {
          color: '#fff',
        }
      },
      series: seriesData,
    }).then(() => {
      timer.value && clearInterval(timer.value);
      myChart = getInstance();
      myChart?.on('mouseover', function (params: any) {
        curIndex.value = params.dataIndex;
        highlightPie(params.dataIndex);
      });
      setTimeout(() => {
        highlightPie(curIndex.value);
        timer.value = setInterval(() => {
          curIndex.value = (curIndex.value + 1) % newVal.length;
          highlightPie(curIndex.value);
        }, 2000);
      }, 1000);
    });
  },
  { immediate: true, deep: true },
);

function highlightPie(index: number = 0) {
  for (let idx in props.chartData) {
    myChart?.dispatchAction({
      type: parseInt(idx) !== index ? 'downplay' : 'highlight',
      seriesIndex: 0,
      dataIndex: idx,
    });
  }
}
onUnmounted(() => {
  timer.value && clearInterval(timer.value);
});
</script>

<style scoped lang="less">
.charts {
  width: 100%;
  height: 100%;
  position: relative;

  .chart {
    width: 50%;
    height: 100%;
  }

  >.right {
    width: 50%;
    font-family: 'ali-puhui-light';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);

    >.row {
      font-size: 1em;
      padding: 5px 0 5px 10px;
      cursor: pointer;
      font-weight: lighter;
      color: rgba(255, 255, 255, 0.8);

      &.active,
      &:hover {
        color: #ffffff;
      }

      >div {
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;

        &.name {
          width: 110px;

          >.square {
            width: 12px;
            height: 12px;
            display: inline-block;
            margin-right: 5px;
            vertical-align: middle;
          }
        }

        &.value {
          width: 100px;
          font-family: 'din-light';
        }
      }
    }
  }
}
</style>